﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SinglePlay.aspx.cs" Inherits="SinglePlay" %>

<%@ Register TagPrefix="flow" TagName="Footer" Src="Footer.ascx" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="<%=Lang %>">
<head id="Head1" runat="server">
    <meta charset="utf-8" />
    <base href="/" target="_top" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <title>个人模式——FlowWorld</title>
    <!--JQuery was release on The MIT License-->
    <script src="/Script/jquery-2.0.0.js" type="text/javascript"></script>
    <script src="Script/Engine.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="/Styles/basic.css" />
    <link rel="stylesheet" type="text/css" href="/Styles/Draw.css" />
    <link rel="stylesheet" type="text/css" href="/Styles/form.css" />
    <style type="text/css">
        #redo
        {
            -webkit-transform:rotate(180deg);
            -moz-transform:rotate(180deg);
            -ms-transform:rotate(180deg);
            -o-transform:rotate(180deg);            
            transform:rotate(180deg);
        }
    </style>
</head>
<body>
    <h1><%=Title%></h1>
    <asp:Literal runat="server" ID="EnableScript" Text="<%$ Resources:R,EnableScript %>" />
    <div id="main">
        <div id="user">
            <p><%=user.NAME %>[Lv&nbsp;<%=user.LEVEL %>]，欢迎回来。您当前的总积分:<%=user.POINT %>。
                <%
                    if (user.ID > 0)
                    { 
                %><a href="/SignIn/?signout=true" style="float: right;">注销</a><%
                    }
                    else
                    {
                %><a href="/SignIn/" style="float: right;">使用通行证登录到游戏</a><%
                    }
                %></p>

        </div>
        <div class="panel">
        <div id="PlayerAInfo" class="Game">
            <p>Player A</p>
            <p>#<span id="flowid">0</span>&nbsp;Level:<span id="level">0</span>&nbsp;<span class="size">5</span>×<span class="size">5</span></p>
            <p>Flows:<span id="currentflow">0</span>/<span id="flows">0</span></p>
            <p>Moves:<span id="moves">0</span></p>
            <%--<p>Best:<span id="best">0</span></p>--%>
            <p>Pipes:<span id="pipe">0</span>%</p>
            <form action="#" method="post" id="actions" name="actions">
                <input type="submit" id="redo" name="next" value="redo" title="重新开始" />
                <input type="submit" id="next" name="next" value="Next" title="下一个" />
            </form>
        </div>
        <canvas id="PlayerA" width="300" height="300" class="Game">您的系统不支持画布操作,使用<a href="https://www.google.com/intl/zh-CN/chrome/browser/">Google Chrome浏览器</a>以获得最佳效果
        </canvas>
            <div style="clear:both;">Coordinates:<span id="coordinates"></span></div>
        </div>
        <flow:Footer runat="server" />
    </div>
    <script type="text/javascript">
        var Maps = null;
        var PlayerA = new Engine($("canvas#PlayerA")[0]);
        $(document).ready(
            function (evt)
            {              
                PlayerA.Draw();
                {
                    $("#redo").click(function (e)
                    {
                        PlayerA.Draw();
                        PlayerA.InitMap(Maps);
                        e.stopPropagation();
                        e.preventDefault();
                        $("#pipe").text(0);
                        $("#moves").text(0);
                        $("#currentflow").text(0);
                    });
                    $("#next").click(function (e)
                    {
                        getmap();
                        e.stopPropagation();
                        e.preventDefault();
                    });
                    getmap();
                    PlayerA.addCavansListener(PlayerA);
                }
            });

        function getmap()
        {
            $.ajax({
                type: "POST",
                url: "/Ajax/SinglePlay/GetMap/",
                success: function (data)
                {
                    //alert(data);
                    if (data.bOk)
                    {
                        if (data.sMsg)
                        {
                            alert(data.sMsg);
                        }
                        if (data.sDebug)
                        {
                            console.warn(data.sDebug);
                        }
                        if (data.data)
                        {
                            var m = data.data;
                            $("span#flowid").text(m.ID);
                            $("span#level").text(m.MapLevel);
                            $("span#flows").text(m.Dot);
                            $("span.size").text(m.Size);
                            Maps = m.Matrix;
                            PlayerA.Draw();
                            PlayerA.InitMap(Maps);
                        }
                    }
                    else
                    {
                        alert("同步失败，请检查网络设置！");
                    }
                },
                dataType: "json"
            });
        }
    </script>
</body>
</html>
